<template>
	<uni-forms-item
		v-if="['input','textarea','number',].includes(fieldConfig?.type) && (typeof(fieldConfig?.options?.hidden) === 'boolean' ? !fieldConfig.options.hidden : true)"
		:label="fieldConfig.label"
		:name="fieldConfig.name" 
		:required="fieldConfig.required" 
		:rules="fieldConfig.rules">
		<uni-easyinput
			:disabled="typeof(fieldConfig?.options?.disabled) === 'boolean' ? fieldConfig.options.disabled : false"
			:type="fieldConfig.type"
			v-model="localFieldData"
			:placeholder="fieldConfig.options.placeholder" />
	</uni-forms-item>
</template>

<script setup>
	import { ref, watch, getCurrentInstance } from 'vue'
	const emits = defineEmits(['update:modelValue'])
	
	const { proxy } = getCurrentInstance()
	const props = defineProps({
		fieldConfig: {
			type: Object,
			required: true
		},
		modelValue: {
			required: true
		},
		useDefault: {
			type: Boolean,
			default: false,
			required: false
		}
	})
	const localFieldData = ref('')
	watch(() => props.modelValue, (newValue, oldValue) => {
		if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
			localFieldData.value = JSON.parse(JSON.stringify(newValue))
		}
	}, {
		deep: true,
		immediate: true
	})
	watch(() => localFieldData.value, (newValue, oldValue) => {
		if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
			emits('update:modelValue', JSON.parse(JSON.stringify(newValue)))
		}
	}, {
		deep: true,
		immediate: false
	})
	
	
	if(props.useDefault){
		localFieldData.value = props.fieldConfig?.options?.defaultValue
	}
</script>

<style>
</style>